<template>
    <div>
        <basic-container>
            <el-page-header @back="goBack" content="客户信息"></el-page-header>
            <div class="madp-statistics-tabs">
                <el-button-group>
                    <el-button :type="tableType === 'customer' ? 'primary' : ''" @click="showCustomerInfo('customer')">客户</el-button>
                    <el-button :type="tableType === 'customerGroup' ? 'primary' : ''" @click="showCustomerInfo('customerGroup')">客户群</el-button>
                </el-button-group>
            </div>
            <div v-show="tableType === 'customer'" class="madp-common-mt">
                <el-table
                    :data="tableData"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column label="序号" align="center">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="客户信息" align="center" prop="contactName"></el-table-column>
                </el-table>
            </div>
            <div v-show="tableType === 'customerGroup'" class="madp-common-mt">
                <el-table
                    :data="tableList"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column label="序号" align="center">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="群ID" align="center" prop="chatGroupId"></el-table-column>
                    <el-table-column label="群状态" align="center" prop="chatGroupStatus"></el-table-column>
                </el-table>
            </div>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </basic-container>
    </div>
</template>
<script>
import { queryEmployeeOfCustomer } from '@/api/customer/incumbency-succession';
import { queryEmployeeOfGroup } from '@/api/customer/resignation-inheritance';
export default {
    props: [],
    data() {
        return {
            // 表格类型
            tableType: 'customer',
            // 表格数据
            tableData: [],
            tableList: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            }
        };
    },
    mounted() {
        this.getEmployeeOfCustomer();
        this.getEmployeeOfGroup();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        // 获取表格数据
        getEmployeeOfCustomer() {
            let params = {
                id: this.$route.query.id
            };
            queryEmployeeOfCustomer(params).then((res) => {
                if (res.data && res.data.code == 0) {
                    this.tableData = res.data.data.records;
                }
            });
        },
        // 获取表格数据
        getEmployeeOfGroup() {
            queryEmployeeOfGroup().then((res) => {
                if (res.data && res.data.code == 0) {
                    this.tableList = res.data.data.records;
                }
            });
        },
        // 显示详情
        showCustomerInfo(tableType) {
            this.tableType = tableType;
        },
        // 返回
        goBack() {
            this.$router.go(-1);
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            if (this.tableType === 'customerGroup') {
                this.getEmployeeOfGroup();
            } else {
                this.getEmployeeOfCustomer();
            }
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            if (this.tableType === 'customerGroup') {
                this.getEmployeeOfGroup();
            } else {
                this.getEmployeeOfCustomer();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-statistics-tabs {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
/deep/.el-page-header__content {
    font-size: 16px;
}
.madp-common-mt {
    margin-top: 20px;
}
</style>
